<!DOCTYPE html>
<html>

<head>
    <meta charset="utf8">
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>

<body>
    <div id="myapp">
        <!-- 插值方式也不一样 -->
        <div>{{count}} : {{count_type}}:{{my_func()}} <button @click="add(10)">+10</button></div>
    </div>
</body>
<script>
    const app = {
        // 存储属性:用来存储值得属性
        data() {
            return {
                // 存储属性count来存储值
                count: 0,
            }
        },
        // 计算属性:不是用来存储值的,而是通过一些逻辑计算来维护当前属性的值
        // computed:{} 来定义计算属性
        computed: {
            // 计算属性count_type 通过计算动态维护count大小属性
            // C++理解 相当于强制重写读取值的写入值方法得特殊变量
            count_type: {
                // 取方法 默认为取方法 计算属性通常用来取值,而存储属性才是负责存储值
                // 只设置取方法的计算属性不能进行赋值,称为"只读属性"
                get() {
                    return this.count > 10 ? "大" : "小";
                },
                // 设置值方法 计算属性也可以用来存储值
                set(new_value) {
                    if (new_value == 999) {
                        this.count = 11;
                    }
                    else {
                        this.count = 0;
                    }
                }
            }
        },
        methods: {
            // 计算属性与函数从使用上没有差别,但是计算属性会利用缓存,
            //调用时只需要看所依赖的值有没有变化,而函数每次都会重新计算
            my_func() {
                return this.count > 10 ? "大" : "小";
            },
            add(n = 1) {
                this.count += n;
            }
        },
    }
    let instance = Vue.createApp(app).mount("#myapp");
    // 先访问普通属性那样去访问它 支持插值
    alert(instance.count_type)
    alert(instance.my_func());
    //通过计算属性设置值 自动调用set方法
    instance.count_type = 999;
    alert(instance.count_type)

</script>

</html>